<template>
	<view class="select-aunt">
		<view
			class="aunt-top w"
			style="
        background-image: linear-gradient(#F6D5C9, #f8f8f8);
        height: 516rpx;
        overflow: hidden;
      "
		>
			<view class="mt60 pb35"><u-navbar :bgColor="bgColor" :title="title" :autoBack="true"></u-navbar></view>
			<view class="fz44 fw" style="color: #3b0000; margin-top: 100rpx; margin-left: 48rpx">严选护理工标准定价</view>
			<view class="fz28 p_ab" style="color: #866162; margin-top: 4rpx; margin-left: 48rpx">专业护理工帮您解决</view>
			<image
				class="p_ab"
				src="https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221014/d487abab722e4c65d5d69a84a48ce317.png"
				style="width: 356rpx; height: 208rpx; top: 188rpx; left: 394rpx"
				mode="aspectFill"
			></image>
		</view>
		<view class="aunt-type bac_f bs6 radius16 ml24 mr24" style="overflow: hidden; margin-top: -140rpx">
			<view class="mt34 dis_flex">
				<text class="fz34 fw tf_222 ml40">您想找哪种护理工？</text>
				<view class="dis_f mr30" @click="accurateFilter">
					<image class="w18 h20" style="margin-right: 6rpx" src="../../static/image/shaixuan-icon.png" mode="aspectFill"></image>
					<text class="fz24 tf_666">精选筛选</text>
				</view>
			</view>
			<view class="ml30 mr30 mt10 dis_f fww jcsb">
				<view class="w200 h116 bac_f8 radius8 dfd_c mt20 jc ac bz" v-for="(item, i) in nanny_list" :key="i" @click="nunnyClick(i)" :class="{ active: c_nanny_id == item.id }">
					<view class="fz28 fw tf_222">{{ item.value }}</view>
					<view class="fz22 tf_999">{{ item.value2 }}</view>
				</view>
			</view>
			<view class="radius8 ml30 mr30 pt24 pl30 pr30 pb30 mt34" style="background-color: #f4f5f7">
				<view class="tf_999 fz26">服务城市(放心填写，我们会保护您的安全信</view>
				<view class="dis_flex mt16" @click="selectCity">
					<text class="fz36 fw tf_22">{{ current_city }}</text>
					<image class="w16" style="height: 28rpx" src="../../static/image/icon-navbar.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="btn ml30 mr30 radius8 mt30 tf h88 dis_f jc fz32 mb40" @click="lookAunt">立即预约</view>
		</view>
		<!-- 选项卡 -->
		<view id="scrollView" class="w" :class="{'fixed':istop}" :style="istop==1 ? `margin-top:${statusHeight}` :''">
			<view class="w auto">
				<u-tabs
					:list="tabs"
					disabled="true"
					lineWidth="20"
					@click="tabClick"
					:current="current"
					lineHeight="7"
					:scrollable="false"
					:lineColor="
						`url() 100% 100%`
					"
					:activeStyle="{
						color: '#222',
						fontWeight: '600',
						fontSize: '15'
					}"
					:inactiveStyle="{
						color: '#999'
					}"
				></u-tabs>
			</view>
		</view>
		<!-- 服务信息 -->
		<view class="sever-info bac_f mt20 mr24 ml24">
			<image src="https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221019/1ffc277a001d6e28809c976b074278d7.png" class="w" mode="widthFix"></image>
			<image src="https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221019/05194ab7a6516ca0fe1757f48dceabc3.png" class="w" mode="widthFix"></image>
			<image src="https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221019/4fab13108f2f8769440f3addb623774c.png" class="w" mode="widthFix"></image>
			<image src="https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221019/6b9ebe9c8b31268d2792adac66de5555.png" class="w" mode="widthFix"></image>
		</view>
		<!-- 城市选择器 -->
		<u-picker
			:show="city_show"
			ref="uPicker"
			@cancel="city_show = false"
			:columns="columns"
			@confirm="confirm"
			@change="changeHandler"
			confirmColor="#f14537"
			cancelColor="#f14537"
		></u-picker>
		<!-- 弹出窗 -->
		<u-popup :show="accuratePopshow" mode="bottom" @close="accuratePopshow = false" :round="8">
			<view class="pop-cart radius_5">
				<view class="pop-title dis_f radius_5 jc bac11" style="height: 98rpx">
					<text class="fz34 tf33 ml238">精确筛选</text>
					<image @click="accuratePopshow = false" class="w44 ml238" src="../../static/image/server_close.png" mode="widthFix"></image>
				</view>
				<view class="">
					<view class="mt34 fz26 tf_999 ml40">您主要需要阿姨做什么？（可多选）</view>
					<view class="mt24 ml30 dis_flex mr30">
						<view
							class="bac_f8 h80 bz dis_f jc fz28 radius6"
							style="width: 216rpx"
							v-for="(item, i) in nanny_list_s"
							:key="i"
							:class="{ active: c_nanny_list_s.indexOf(i) != -1 }"
							@click="nunnyClickS(i)"
						>
							{{ item.value }}
						</view>
					</view>
					<view class="mt40 fz26 tf_999 ml40">您对阿姨还有哪些要求？（选填）</view>
					<view class="mt4 ml30 dis_f jcsb mr30 fww">
						<view
							class="bac_f8 mt20 fz28 h80 bz dis_f jc radius6"
							style="width: 216rpx"
							v-for="(item, i) in nanny_list_t"
							:key="i"
							:class="{ active: c_nanny_list_t.indexOf(i) != -1 }"
							@click="nunnyClickT(i)"
						>
							{{ item.value }}
						</view>
						<view class="bac_f8 mt20 fz28 h80 dis_f jc radius6" style="width: 216rpx" v-for="index of 9 - nanny_list_t.length" :key="index"></view>
					</view>
				</view>
				<view v-show="textarea" class="mr30 ml30 mt24">
					<uni-easyinput autoHeight type="textarea" v-model="otherTextarea" placeholder="例如希望阿姨性格如何、阿姨籍贯要求等等"></uni-easyinput>
				</view>
				<view class="btn ml30 mr30 radius8 mt48 tf h88 dis_f jc fz32 mb40" @click="confirmInfo">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getCityInfo, getStreetInfo, submitOldInfo } from '@/config/api.js';
export default {
	data() {
		return {
			title:' ',
			current: 0,
			textarea: false,
			bgColor: 'rgba(255,255,255,0)',
			current_city: '太原市 小店区',
			city_show: false,
			columns: [],
			columnData: [],
			c_nanny_id: '', //当前保姆筛选项
			c_nanny_list_s: [],
			c_nanny_list_t: [],
			nanny_list: [
				{
					id: 1,
					value: '住家护理',
					value2: '全心照顾'
				},
				{
					id: 2,
					value: '24小时护理',
					value2: '24小时看护'
				},
				{
					id: 3,
					value: '12小时护理',
					value2: '白天照看老人'
				}
			], //护理工筛选项
			nanny_list_s: [
				{
					id: 1,
					value: '做饭做家务'
				},
				{
					id: 2,
					value: '全天陪护'
				},
				{
					id: 3,
					value: '照顾老人'
				}
			], //弹出框保姆筛选
			nanny_list_t: [
				{
					id: 1,
					value: '年轻一些'
				},
				{
					id: 2,
					value: '经验丰富'
				},
				{
					id: 3,
					value: '本地人 '
				},
				{
					id: 4,
					value: '性格开朗'
				},
				{
					id: 5,
					value: '做饭好吃'
				},
				{
					id: 6,
					value: '普通话好'
				},
				{
					id: 7,
					value: '其他'
				}
			],
			statusHeight:'',
			myScroll: '', //菜单栏距离top
			istop: 0, //判断是否显示
			otherTextarea: '',
			accuratePopshow: false,
			tabs: [{ name: '服务范围' }, { name: '收费标准' }, { name: '服务保障' }, { name: '流程说明' }]
		};
	},
	onLoad() {
		let res = wx.getSystemInfoSync();
		this.statusHeight = res.statusBarHeight + 44 + 'px';
		this.getCityInfo();
	},
	mounted() {
		console.log('页面挂在完毕');
		const query = uni.createSelectorQuery().in(this);
		query
			.select('#scrollView')
			.boundingClientRect(data => {
				console.log('布局位置信息', JSON.stringify(data));
				console.log('节点离页面顶部的距离' + data.top);
				this.myScroll = data.top;
			})
			.exec();
	},
	onPageScroll: function(e) {
		this.bgColor = '#fff';
		if (e.scrollTop == 0) {
			this.bgColor = 'rgba(255,255,255,0)';
			this.title = ' '
		}else{
			this.title = '养老护理'
		}
		if (e.scrollTop > this.myScroll) {
			this.istop = 1;
		} else {
			this.istop = 0;
		}
	},
	methods: {
		// 滚动固定位置
		tabClick(item) {
			console.log(item);
			if (item.index == 0) {
				uni.pageScrollTo({
					scrollTop: 400,
					duration: 300
				});
			} else if (item.index == 1) {
				this.current = 1;
				uni.pageScrollTo({
					scrollTop: 700,
					duration: 300
				});
			} else if (item.index == 2) {
				this.current = 2;
				uni.pageScrollTo({
					scrollTop: 1200,
					duration: 300
				});
			} else {
				this.current = 3;
				uni.pageScrollTo({
					scrollTop: 1300,
					duration: 300
				});
			}
		},
		//确认信息
		confirmInfo() {
			this.accuratePopshow = false;
		},
		//获取城市信息
		getCityInfo() {
			getCityInfo().then(res => {
				this.columns = res;
			});
			getStreetInfo().then(res => {
				this.columnData = res;
			});
		},
		changeHandler(e) {
			const {
				columnIndex,
				value,
				values, // values为当前变化列的数组内容
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker
			} = e;
			// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			if (columnIndex === 0) {
				// picker为选择器this实例，变化第二列对应的选项
				picker.setColumnValues(1, this.columnData[index]);
			}
		},
		// 回调参数为包含columnIndex、value、values
		confirm(e) {
			console.log('confirm', e);
			this.city_show = false;
			this.current_city = `${e.value[0]} ${e.value[1]}`;
		},

		//选择城市
		selectCity() {
			this.city_show = true;
		},
		//提交选择保姆
		lookAunt() {
			if (this.c_nanny_id) {
				let phone = '18434660717';
				let option1 = this.nanny_list[this.c_nanny_id - 1].value;
				let option2 = [];
				this.c_nanny_list_s.forEach((v, i) => {
					option2.push(this.nanny_list_s[v].value);
				});
				let area = this.current_city.replace(' ', '/');
				let option3 = [];
				this.c_nanny_list_t.splice(this.c_nanny_list_t.indexOf(6), 1);
				this.c_nanny_list_t.forEach((v, i) => {
					option3.push(this.nanny_list_t[v].value);
				});
				let option_s2 = option2.toString();
				let option_t3 = option3.toString();
				submitOldInfo({
					option1: option1,
					option2: option_s2,
					option3: option_t3,
					phone: phone,
					area: area,
					text: this.otherTextarea
				}).then(res => {
					console.log(res);
					uni.showModal({
						title: '提示',
						content: '提交成功，我们会有客服联系您'
					});
				});
			} else {
				uni.showModal({
					title: '提示',
					content: '请选择您想要找那种护理工'
				});
			}
		},
		//点击筛选阿姨
		nunnyClick(i) {
			this.c_nanny_id = this.nanny_list[i].id;
			console.log(this.c_nanny_id);
		},
		//点击选择下拉框筛选项
		nunnyClickS(i) {
			if (this.c_nanny_list_s.indexOf(i) == -1) {
				console.log(i); //打印下标
				this.c_nanny_list_s.push(i); //选中添加到数组里
			} else {
				this.c_nanny_list_s.splice(this.c_nanny_list_s.indexOf(i), 1); //取消
			}
		},
		nunnyClickT(i) {
			if (this.c_nanny_list_t.indexOf(i) == -1) {
				console.log(i); //打印下标
				this.c_nanny_list_t.push(i); //选中添加到数组里
				this.c_nanny_list_t.indexOf(6) == -1 ? (this.textarea = false) : (this.textarea = true);
			} else {
				this.c_nanny_list_t.splice(this.c_nanny_list_t.indexOf(i), 1); //取消
				this.c_nanny_list_t.indexOf(6) == -1 ? (this.textarea = false) : (this.textarea = true);
			}
		},
		//精确筛选
		accurateFilter() {
			this.accuratePopshow = true;
		}
	}
};
</script>

<style lang="scss">
.active1 {
	border: 1px solid #f14537;
	background-color: rgba(241, 69, 55, 0.05);
}
.active {
	border: 1px solid #f14537;
	color: #f14537;
	background-color: rgba(241, 69, 55, 0.05);
}
.select-aunt {
	.aunt-top {
		.top-nav-bar {
		}
	}
}
.fixed {
	position: fixed;
	top: 0rpx;
	z-index: 10;
	background-color: #fff;
}
</style>
